<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import="dao.ContentsDAO"%>
<%@ page import="java.sql.*,java.util.*"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<style>
#body{
     height:100%;
     width:50%;
     background-color:#ECFFFF;
}
#all{
     margin:auto;
     margin-top:20px;
     height:500px;
     width:600px;
}
#righttop{
     float:right;
     height:98px;
     width:478px;
     border:1px solid black;
     background-color:#ECFFFF;
}
#rightfoot{
     float:right; 
     height:299px;
     width:478px;
     border:1px solid black;
     border-top:none;  
     background-color:#ECFFFF;
}
.ab{
     color:green;
}
.ac{
     color:red;
}
</style>
<body align="center" id="body">
<div id="all">
  <div id="righttop">
  <%
  ContentsDAO dao=new ContentsDAO();
  Map<String, Integer> map = new HashMap<String, Integer>();
  List<Integer> clist1;
	try {
		clist1 = dao.geta();
	 %>
  <table ><br>
  <tr class="ab">
       <td>距离到期日小于5天的合同有<br></td>
       <td><%=clist1.get(0) %>个合同</td>
  </tr>
  <tr class="ac">
       <td>已经到期但还未结束的合同有</td><td><%=clist1.get(1) %>个合同</td>
  </tr>
  </table>
  </div>
  <%} 
	catch (Exception e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	} %>
  <div id="rightfoot">
  <script src="<%=basePath %>js/echarts.common.min.js"></script>
  <script src="<%=basePath %>js/jquery-1.9.1.min.js"></script>
  <script src="<%=basePath %>js/esl.js"></script>
  <script type="text/javascript">
  require.config({
      paths:{ 
          'echarts' : '<%=basePath %>js/echarts.common.min',
          'echarts/chart/bar' : '<%=basePath %>js/echarts.common.min'
      }
  });
  //'echarts/chart/bar' : 'http://localhost:1235/progrom/js/echarts'
  // 使用
  //'echarts/chart/bar'
  require(
      [
          'echarts',
          'echarts/chart/bar'// 使用柱状图就加载bar模块，按需加载
      ],
      function (ec) {
          // 基于准备好的dom，初始化echarts图表
          var a;             //草拟
	        var a;                //审批
	        var c;               //执行
	        var d;               //收/付情况
	        $.ajax({
	            url: "<%=basePath%>GetData",
	            async: false,
	            type: 'POST',
	            dataType: 'json',
	            timeout: 1000,
	            cache: false,
	            success: function (data) { 
	                  //成功时执行的回调方法
	                a = data.a;
	               	b = data.b;
	                c = data.c;
	                d = data.d;
	            },
	            error: erryFunction                 //错误时执行方法
	        });
	
	
	        function erryFunction() {
	            alert("数据没返回成功！");
	        };
  var myChart = echarts.init(document.getElementById('rightfoot'));

  var option = {
		  backgroundColor:"#ECFFFF",
    color: ['#88FFFF'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['草拟', '审批', '执行', '收/付情况'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'存在数量',
            type:'bar',
            barWidth: '60%',
            data:[a, b, c, d]
        }
    ]
};
  myChart.setOption(option);
      }
      );
  </script>
  </div>

</div>

</body>
</html>